<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <script src="js/rem.js"></script>
    <style>
        .list {
            margin:0;
            padding:0;
            width:7.02rem;
            height:auto;
            list-style: none;
            margin:0 auto;
        }
        .item {
            width:7.02rem;
            height:2rem;
            border-radius: 0.12rem;
            margin-bottom:0.2rem;
            background-color:pink;
        }
    </style>
</head>
<body>
    
    <ul class="list">

    </ul>
    

    <script src="libs/zepto/zepto.js"></script>
    <script src="libs/zepto/ajax.js"></script>
    <script src="libs/zepto/event.js"></script>
    <script src="libs/zepto/touch.js"></script>
    <script src="libs/zepto/selector.js"></script>
    <script>
        var flag = true;
        var page = 0;
        $(window).scroll(function (e) {
            
            // console.log($(window).height(),'<--$(window).height()');
            // console.log($(window).scrollTop(), '<---$(document).scrollTop()');
            // console.log($(document).height(), '$(document).height()');
            
            if (
                $(window).height() + 
                $(window).scrollTop() + 
                50 >= $(document).height() &&
                flag
            ) {
                flag = false
                console.log('页面底部');
                page++;
                getData(page);
            }
        });
        page++;
        getData(page);
        function getData(p) {
            var html = '';
            $.ajax({
                url: `./3-2.json?page=${p}`,
                success:function (res) {
                    console.log(res,'<---res');
                    if (res.status) {
                        for (
                            var i = 0;
                            i< res.data.length;
                            i++
                        ) {
                            html += `<li class="item">${res.data[i].title}</li>`;
                        }
                        $('.list').append(html);
                        flag = true;
                    }
                },
                error:function (err) {
                    console.log(err, 'err');
                }
            })
        }
        
    </script>

</body>
</html>